<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>管理员</el-breadcrumb-item>
      <el-breadcrumb-item>用户管理</el-breadcrumb-item>
    </el-breadcrumb>

    <el-card class="box-card">
      <!-- <el-button type="primary" class="el-button1">新增用户</el-button> -->
      <el-table :data="allUserInfo" border style="width: 100%">
        <el-table-column type="index" label="序号" width="60" align="center">
        </el-table-column>
        <el-table-column
          prop="username"
          label="用户昵称"
          width="180"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="mobile"
          label="手机号码"
          width="180"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="password"
          label="用户密码"
          width="180"
          align="center"
        >
        </el-table-column>
        <el-table-column prop="sex" label="用户性别" width="120" align="center">
          <template slot-scope="scope">
            <div>
              {{ scope.row.sex === 1 ? "男" : "女" }}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="desc" label="用户介绍" width="280">
        </el-table-column>
        <el-table-column label="用户角色" width="180" align="center">
          <template slot-scope="scope">
            <div>
              {{
                scope.row.roleId == "1"
                  ? "普通用户"
                  : scope.row.roleId == "2"
                  ? "考研生"
                  : scope.row.roleId == "3"
                  ? "研究生"
                  : "管理员"
              }}
            </div>
          </template>
        </el-table-column>
        <!-- <el-table-column
          prop="status"
          label="用户状态"
          width="80"
          align="center"
        >
          <template slot-scope="scope">
            <div>
              {{ scope.row.status === 1 ? "启用" : "禁用" }}
            </div>
          </template>
        </el-table-column> -->
        <el-table-column
          prop="status"
          label="用户状态"
          width="140"
          align="center"
        >
          <!-- <el-select v-model="value">
            <el-option
              v-for="item in statusOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select> -->
          <template slot-scope="scope">
            <el-select
              :value="scope.row.status === 1 ? '启用' : '禁用'"
              placeholder="请选择"
              @change="
                (value) => {
                  changeStatus(value, scope.row);
                }
              "
              value-key="item"
            >
              <el-option
                v-for="item in statusOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </template>
        </el-table-column>

        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <div>
              <el-button type="primary" size="mini" disabled>删除</el-button>
              <el-button
                type="primary"
                size="mini"
                @click="showUserInfo(scope.row.id)"
                v-if="scope.row.roleId === '2' || scope.row.roleId === '3'"
                >查看认证信息</el-button
              >
            </div>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <!--认证信息-->
    <el-dialog
      title="认证信息"
      :visible.sync="userInfoDialogVisible"
      width="80%"
      align="center"
    >
      <el-form :model="userInfoForm">
        <el-form-item label="用户学校" :label-width="formLabelWidth">
          <span>{{ userInfoForm.identity.school }}</span>
        </el-form-item>
        <el-form-item label="用户专业" :label-width="formLabelWidth">
          <span>{{ userInfoForm.identity.profession }}</span>
        </el-form-item>
        <el-form-item label="用户入学年份" :label-width="formLabelWidth">
          <span>{{ userInfoForm.identity.entranceYear }}</span>
        </el-form-item>
        <el-form-item label="认证状态" :label-width="formLabelWidth">
          <span>{{
            userInfoForm.identity.status === 0
              ? "未通过"
              : userInfoForm.identity.status == "1"
              ? "通过"
              : "认证中"
          }}</span>
        </el-form-item>
        <el-form-item label="用户头像" :label-width="formLabelWidth">
          <img style="width: 50%;" :src="userInfoForm.user.headPicUrl" alt="" />
        </el-form-item>
        <el-form-item
          label="用户学生证或校园卡照片"
          :label-width="formLabelWidth"
        >
          <img
            style="width: 50%;"
            :src="userInfoForm.identity.stuidPicUrl"
            alt=""
          />
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import {
  ReqGetUserList,
  ReqUpdateUserInfo,
  ReqGetUserInfoById,
} from "../../request/index.js";
export default {
  data() {
    return {
      allUserInfo: [],
      statusOptions: [
        {
          value: "0",
          label: "禁用",
        },
        {
          value: "1",
          label: "启用",
        },
      ],
      formLabelWidth: "240px",
      userInfoDialogVisible: false,
      userInfoForm: {
        identity: {},
        user: {},
        head: {
          fits: [],
          url: "",
        },
      },
    };
  },
  methods: {
    getUserStatus() {
      return scope.row.status === 1 ? "启用" : "禁用";
    },
    changeStatus(status, row) {
      ReqUpdateUserInfo({
        password: row.password,
        desc: row.desc,
        sex: row.sex,
        username: row.username,
        userId: row.id,
        status: status,
      }).then((res) => {
        if ((res.msg = "成功")) {
          this.$message({
            showClose: true,
            message: "更新成功",
            type: "success",
          });
          this.getUserList();
        } else {
          this.$message({
            showClose: true,
            message: "更新失败",
            type: "warning",
          });
        }
      });
    },
    showUserInfo(userId) {
      this.userInfoDialogVisible = true;
      ReqGetUserInfoById;
      ReqGetUserInfoById({
        id: userId,
      }).then((res) => {
        console.log(res);
        this.userInfoForm.identity = res.data.identity;
        this.userInfoForm.user = res.data.user;
        this.userInfoForm.head.fits = ["cover"];
        this.userInfoForm.head.url = res.data.user.headPicUrl;
        console.log(this.userInfoForm);
      });
    },
    getUserList() {
      ReqGetUserList({}).then((res) => {
        this.allUserInfo = res.data;
      });
    },
  },
  created() {
    ReqGetUserList({}).then((res) => {
      this.allUserInfo = res.data;
    });
  },
};
</script>

<style scoped></style>
